//创建"外壳"组件App
import React,{Component}  from 'react'
import Header from './Components/Header'
import List from './Components/List'
import Footer from './Components/Footer'
import './App.css'


//创建-并-暴露App组件
export default class App extends Component{
    state = {
       dataList:[
           {id:1,work:'护士',isright:false},
           {id:2,work:'教师',isright:false},
           {id:3,work:'程序员',isright:false},

       ] 
    }
    addData = (dataObj)=>{
        console.log('App',dataObj)

        const {dataList} = this.state

        const newDataList = [dataObj,...dataList]

        this.setState({
            dataList:newDataList
        })
    }
    //upData用于更新dataList对象
    updatas = (id,isright)=>{
        //获取状态中的dataList
        const {dataList} = this.state

        //匹配处理数据
        const newdataList = dataList.map((itemobj)=>{
            if(itemobj.id === id) return {...itemobj,isright}
            else return itemobj
        })
        this.setState({
            dataList:newdataList
        })
    }
    render(){
        const {dataList} = this.state
        return(
            <div className="todo-container">
            <div className="todo-wrap">
              <Header addData={this.addData}/>   
              <List dataList={dataList} updatas={this.updatas}/>
              <Footer/>
            </div>
          </div>
        )
    }
}



